<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>入住登记页面</title>
<style>
table {
	border-color: green;
}
</style>
</head>
<body>
	<div class="mainDiv" align="center" style="margin-top: 15%;">
		<div>
			<form action="user/register.action" id="form" method="POST">
				<table
					style="width: 320px; text-align: center; border-color: white;"
					border="1">
					<tr>
						<td>姓名</td>
						<td><input type="text"
							style="width: 96%; text-align: center; background-color: transparent; border: 0px"
							type="text" id="sUserName" name="sUserName" maxlength="5"
							placeholder="此项为必填项" class="text1" onkeyup="this.value=this.value.replace(/[^\u4E00-\u9FA5]/g,'')" /></td>
					</tr>
					<tr>
						<td>身份证</td>
						<td><input type="text"
							style="width: 96%; text-align: center; background-color: transparent; border: 0px"
							id="sIDCard" name="sIDCard" maxlength="18" placeholder="此项为必填项"
							class="text1" onkeyup="value=value.replace(/^[a-zA-Z]+\D*|^\d{0,16}[a-zA-Z]+|[^0-9Xx]/g,'') " /></td>
					</tr>
					<tr>
						<td>电话</td>
						<td><input type="text"
							style="width: 96%; text-align: center; background-color: transparent; border: 0px"
							id="sTel" name="sTel" maxlength="11" class="text1" onkeyup="value=value.replace(/[^\d]/g,'') "/></td>
					</tr>
					<tr>
						<td>性别</td>
						<td><input type="radio" class="sSex" name="sSex" checked="checked" value="男">男
							<input type="radio" class="sSex" name="sSex" value="女">女
						</td>
					</tr>
					<tr>
						<td>入住房间</td>
						<td><select id="sRoomType" name="sRoomType"
							style="width: 40%; text-align: center;"  onchange="changeRoom(this)">
								<option value="">房间类型</option>
								<c:forEach items="${roomType }" var="item">
									<option value="${item.sRoomType }" />${item.sRoomType }
								</c:forEach>
						</select>
						 <select id="sRoomName" name="sRoomName"
							style="width: 40%; text-align: center;">
								<option value="">房间列表</option>
						</select></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><input type="button"
							style="width: 100px; background-color: rgba(233, 235, 240, 0.3);"
							value="登          记" class="text" onclick="register()" /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	function register() {
		var magstr = "";
		var sUserName = $("#sUserName").val();
		var sIDCard = $("#sIDCard").val();
		var sTel = $("#sTel").val();
		var sSex = $(".sSex:checked").val();
		var sRoomName = $("#sRoomName").val();
		if (sUserName == "") {
			magstr += "请输入姓名\n";
		}
		if (sIDCard == "") {
			magstr += "请输入身份证号\n";
		}
		if (sTel == "") {
			magstr += "请输入电话号码\n";
		}
		if (sSex == "") {
			magstr += "请选择性别\n";
		}
		if(sRoomName == ""){
			magstr += "请选择房间\n";
		}
		if (magstr != "") {
			alert(magstr);
			return false;
		}
		return false;
		document.getElementById("form").submit();
	}
	
	function changeRoom(selectObj) {
		var sRoomType = selectObj.value;
		var str = "<option value='-1'>房间列表</option>";
		$.ajax({
			cache : true,
			type : "POST",
			url : "room/getRoomList.action?sRoomType=" + sRoomType,
			dataType : "json",
			async : false,
			success : function(data) {
				
				var json = data["roomList"];
				
				for (var i = 0; i < json.length; i++) {
					str += "<option value='"+json[i]["sRoomName"]+"'>" +json[i]["sRoomName"]+ "</option>";
				}
				$("#sRoomName").html(str);
			}
		});
	}
</script>
</html>